import { useState, useEffect, useRef } from "react";
import { Modal, Input } from "antd";

const { TextArea } = Input;

const ErrorDialog = ({ title, error }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [stringError, setStringError] = useState();
  const textAreaRef = useRef(null);

  useEffect(() => {
    setIsModalOpen(true);
    setStringError(
      error
        ? typeof error === "string"
          ? error
          : JSON.stringify(error, null, 2)
        : null
    );
  }, [error]);

  const handleOk = () => {
    const textArea = textAreaRef.current.resizableTextArea.textArea;
    if (textArea) {
      textArea.select();
      document.execCommand("copy");
    }
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <Modal
      title={title}
      open={isModalOpen}
      onOk={handleOk}
      onCancel={handleCancel}
      okText="Копировать текст ошибки"
      cancelText="Ок"
    >
      <p>
        Нам очень важна обратная связь. Пожалуйста отправь нам отчет об ошибке в
        наш телеграм аккаунт @bestapp
      </p>
      <TextArea ref={textAreaRef} rows={20} value={stringError} />
    </Modal>
  );
};

export default ErrorDialog;
